<template>
  <div class="system-config-page">
    <el-card>
      <template #header>系统配置</template>
      <el-form :model="configs" label-width="120px">
        <el-form-item
          v-for="(value, key) in configs"
          :key="key"
          :label="key"
        >
          <el-input v-model="configs[key]" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveConfigs">保存</el-button>
          <el-button @click="load">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { fetchConfig, saveConfig } from '@/api/configApi'

const configs = ref<Record<string, string>>({})

const load = async () => {
  const { data } = await fetchConfig()
  configs.value = data || {}
}

const saveConfigs = async () => {
  await saveConfig(configs.value)
  ElMessage.success('保存成功')
}

onMounted(load)
</script> 